{{Template:SZPT-CHINA/head}}
<html>

<head>

</head>
<!-- jquery 公共CSS-->
<script src="https://2021.igem.org/Team:SZPT-CHINA/JS/jQuery&action=raw&ctype=text/javascript"></script>
<link rel="stylesheet" href="https://2021.igem.org/Team:SZPT-CHINA/CSS/Public?action=raw&amp;ctype=text/css">

<script>
    //设置展开
    $(document).ready(function () {
      

    })
</script>
<script>
    $(document).ready(function () {
        //document.body.append(document.getElementById('loadImg'))
        //滑动
        var loadImg = document.getElementById('downContent'); //选取id为test的元素
        loadImg.style.display = 'none'; // 隐藏选择的元素
        //加载适配
        init();
        var loadImg = document.getElementById('loadImg'); //选取id为test的元素
        loadImg.style.display = 'block'; // 隐藏选择的元素
    });


    //BEGIN-loading
    var loadhidekey = 0;

    window.onload = function () {
        console.log("页面加载好了", loadhidekey)
        setTimeout(function () {
            //$("#loaderDownId").hide();
            //$("#loadingHome").hide();
            //$("#loading").hide();
        }, 10);
        init();


        setTimeout(function () {
            //$("#loaderDownId").hide();
            //滑到顶部
            document.body.scrollTop = document.documentElement.scrollTop = 0;
            loadhidekey = 1
            $("#directory").hide();
            $("#loadingHome").hide();
            var loadImg = document.getElementById('downContent'); //选取id为test的元素
            loadImg.style.display = 'block'; // 隐藏选择的元素
            document.body.append(document.getElementById('directory'))
            document.body.append(document.getElementById('head'))
            // $("#loading").hide();
        }, 1000);


    }

    function animateScroll(element, speed) {
        let rect = element.getBoundingClientRect();
        //获取元素相对窗口的top值，此处应加上窗口本身的偏移
        let top = window.pageYOffset + rect.top - 100;
        let currentTop = 0;
        let requestId;
        //采用requestAnimationFrame，平滑动画
        function step(timestamp) {
            currentTop += speed;
            if (currentTop <= top) {
                window.scrollTo(0, currentTop);
                requestId = window.requestAnimationFrame(step);
            } else {
                window.cancelAnimationFrame(requestId);
            }
        }
        window.requestAnimationFrame(step);
    }



    //设置展开
    $(document).ready(function () {

        if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|Windows Phone/i.test(navigator.userAgent)) {
            // mobilePage();
            designHeight = 3100;
        } else {
            //pc
            designHeight = 980;
        }
        lateHeight = document.documentElement.clientHeight;
        heightRatio = lateHeight / designHeight
        console.log("height:", heightRatio)
        console.log('1')

        document.getElementById("dir1").onclick = function () {
            // window.scrollTo(0, 350*heightRatio/0.713265306122449);
            let target = document.getElementById('content1');
            animateScroll(target, 250);
            $("#directory").show();
        }
        document.getElementById("dir2").onclick = function () {
            //window.scrollTo(0, 3500 * heightRatio / 0.713265306122449);
            let target = document.getElementById('content2');
            animateScroll(target, 250);
        }
        document.getElementById("dir3").onclick = function () {
            //window.scrollTo(0, 4300 * heightRatio / 0.713265306122449);
            let target = document.getElementById('content3');
            animateScroll(target, 250);
        }
        document.getElementById("dir4").onclick = function () {
            //window.scrollTo(0, 4300 * heightRatio / 0.713265306122449);
            let target = document.getElementById('content4');
            animateScroll(target, 250);
        }
        document.getElementById("dir5").onclick = function () {
            //window.scrollTo(0, 4300 * heightRatio / 0.713265306122449);
            let target = document.getElementById('content5');
            animateScroll(target, 250);
        }
        document.getElementById("dir6").onclick = function () {
            //window.scrollTo(0, 4300 * heightRatio / 0.713265306122449);
            let target = document.getElementById('content6');
            animateScroll(target, 250);
        }
        document.getElementById("dir7").onclick = function () {
            //window.scrollTo(0, 4300 * heightRatio / 0.713265306122449);
            let target = document.getElementById('content7');
            animateScroll(target, 250);
        }

        //页面定制下滚
        document.getElementById("down1").onclick = function () {
            $("#content1Key").fadeOut(500);
            $("#content7Key").fadeIn(500);

            var value = document.getElementById('dir7').getAttribute("style")
            value = value.replace(/ffffff/, "fffea4")
            $("#dir7").attr("style", value);

            setTimeout(function () {
                let target = document.getElementById('content7');
                animateScroll(target, 250);
            }, 600);
        }
        document.getElementById("down2").onclick = function () {
            //window.scrollTo(0, 4300 * heightRatio / 0.713265306122449);
            let target = document.getElementById('down2key');
            animateScroll(target, 250);
        }
        document.getElementById("down3").onclick = function () {
            //window.scrollTo(0, 4300 * heightRatio / 0.713265306122449);
            $("#content2Key").fadeOut(500);
            $("#content6Key").fadeIn(500);
            var value = document.getElementById('dir6').getAttribute("style")
            value = value.replace(/ffffff/, "fffea4")
            $("#dir6").attr("style", value);

            setTimeout(function () {
                let target = document.getElementById('down3key');
                animateScroll(target, 250);
            }, 600);

        }
        // document.getElementById("down4").onclick = function () {
        //     $("#content1Key").fadeOut(500);
        //     $("#content7Key").fadeIn(500);

        //     var value = document.getElementById('dir7').getAttribute("style")
        //     value = value.replace(/ffffff/, "fffea4")
        //     $("#dir7").attr("style", value);

        //     setTimeout(function () {
        //         let target = document.getElementById('content7');
        //         animateScroll(target, 250);
        //     }, 600);
        // }

        // document.getElementById("down5").onclick = function () {
        //     $("#content1Key").fadeOut(500);
        //     $("#content7Key").fadeIn(500);

        //     var value = document.getElementById('dir7').getAttribute("style")
        //     value = value.replace(/ffffff/, "fffea4")
        //     $("#dir7").attr("style", value);

        //     setTimeout(function () {
        //         let target = document.getElementById('content7');
        //         animateScroll(target, 250);
        //     }, 600);
        // }

        //图片跳转


        document.getElementById("pic1").onclick = function () {
            console.log("123")
            //window.scrollTo(0, 4300 * heightRatio / 0.713265306122449);
            let target = document.getElementById('two1');
            animateScroll(target, 250);
        }

        document.getElementById("pic2").onclick = function () {
            console.log("123")
            //window.scrollTo(0, 4300 * heightRatio / 0.713265306122449);
            let target = document.getElementById('two2');
            animateScroll(target, 250);
        }

        document.getElementById("pic3").onclick = function () {
            //window.scrollTo(0, 4300 * heightRatio / 0.713265306122449);
            let target = document.getElementById('two3');
            animateScroll(target, 2500);
        }

        document.getElementById("pic4").onclick = function () {
            //window.scrollTo(0, 4300 * heightRatio / 0.713265306122449);
            let target = document.getElementById('two6');
            animateScroll(target, 2500);
        }

        document.getElementById("pic5").onclick = function () {
            //window.scrollTo(0, 4300 * heightRatio / 0.713265306122449);
            let target = document.getElementById('two5');
            animateScroll(target, 2500);
        }

        document.getElementById("pic6").onclick = function () {
            //window.scrollTo(0, 4300 * heightRatio / 0.713265306122449);
            let target = document.getElementById('two4');
            animateScroll(target, 2500);
        }

        document.getElementById("pic7").onclick = function () {
            //window.scrollTo(0, 4300 * heightRatio / 0.713265306122449);
            let target = document.getElementById('two9');
            animateScroll(target, 2500);
        }

        document.getElementById("pic8").onclick = function () {
            //window.scrollTo(0, 4300 * heightRatio / 0.713265306122449);
            let target = document.getElementById('two8');
            animateScroll(target, 2500);
        }

        document.getElementById("pic9").onclick = function () {
            //window.scrollTo(0, 4300 * heightRatio / 0.713265306122449);
            let target = document.getElementById('two7');
            animateScroll(target, 2500);
        }


        document.getElementById("picRight1").onclick = function () {
            //window.scrollTo(0, 4300 * heightRatio / 0.713265306122449);
            let target = document.getElementById('right3');
            animateScroll(target, 2500);
        }
        document.getElementById("picRight2").onclick = function () {
            //window.scrollTo(0, 4300 * heightRatio / 0.713265306122449);
            let target = document.getElementById('right3');
            animateScroll(target, 2500);
        }
        document.getElementById("picRight3").onclick = function () {
            //window.scrollTo(0, 4300 * heightRatio / 0.713265306122449);
            let target = document.getElementById('right4');
            animateScroll(target, 2500);
        }
        document.getElementById("picRight4").onclick = function () {
            //window.scrollTo(0, 4300 * heightRatio / 0.713265306122449);
            let target = document.getElementById('right2');
            animateScroll(target, 2500);
        }
        document.getElementById("picRight5").onclick = function () {
            //window.scrollTo(0, 4300 * heightRatio / 0.713265306122449);
            let target = document.getElementById('right5');
            animateScroll(target, 2500);
        }
        document.getElementById("picRight6").onclick = function () {
            //window.scrollTo(0, 4300 * heightRatio / 0.713265306122449);
            let target = document.getElementById('right6');
            animateScroll(target, 2500);
        }



        //
        var value = document.getElementById('dir1').getAttribute("style")
        value = value.replace(/ffffff/, "fffea4")
        $("#dir1").attr("style", value);
        $("#content1Key").fadeIn(500);
        $("#content2Key").fadeOut(500);
        $("#content3Key").fadeOut(500);
        $("#content4Key").fadeOut(500);
        $("#content5Key").fadeOut(500);
        $("#content6Key").fadeOut(500);
        $("#content7Key").fadeOut(500);

        document.getElementById("dir1").onclick = function () {

            $("#content1Key").fadeIn(500);
            $("#content2Key").fadeOut(500);
            $("#content3Key").fadeOut(500);
            $("#content4Key").fadeOut(500);
            $("#content5Key").fadeOut(500);
            $("#content6Key").fadeOut(500);
            $("#content7Key").fadeOut(500);


            var dir1key = 0;
            if (dir1key == 0) {
                let target = document.getElementById('content1Key');
                setTimeout(function () {
                    animateScroll(target, 250);
                }, 600);

                $("#directory").show();

                var value = document.getElementById('dir7').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir7").attr("style", value);

                var value = document.getElementById('dir6').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir6").attr("style", value);

                var value = document.getElementById('dir5').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir5").attr("style", value);

                var value = document.getElementById('dir4').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir4").attr("style", value);

                var value = document.getElementById('dir3').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir3").attr("style", value);

                var value = document.getElementById('dir2').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir2").attr("style", value);

                var value = document.getElementById('dir1').getAttribute("style")
                value = value.replace(/ffffff/, "fffea4")
                $("#dir1").attr("style", value);


                dir1key = 1;
            } else {
                var value = document.getElementById('dir1').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir1").attr("style", value);
                dir1key = 0
            }

        }
        document.getElementById("dir2").onclick = function () {
            $("#content1Key").fadeOut(500);
            $("#content2Key").fadeIn(500);
            $("#content3Key").fadeOut(500);
            $("#content4Key").fadeOut(500);
            $("#content5Key").fadeOut(500);
            $("#content6Key").fadeOut(500);
            $("#content7Key").fadeOut(500);

            var dir2key = 0;
            if (dir2key == 0) {
                let target = document.getElementById('content2Key');
                setTimeout(function () {
                    animateScroll(target, 250);
                }, 600);

                $("#directory").show();

                var value = document.getElementById('dir7').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir7").attr("style", value);

                var value = document.getElementById('dir6').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir6").attr("style", value);

                var value = document.getElementById('dir5').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir5").attr("style", value);

                var value = document.getElementById('dir4').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir4").attr("style", value);

                var value = document.getElementById('dir3').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir3").attr("style", value);

                var value = document.getElementById('dir2').getAttribute("style")
                value = value.replace(/ffffff/, "fffea4")
                $("#dir2").attr("style", value);

                var value = document.getElementById('dir1').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir1").attr("style", value);


                dir2key = 1;
            } else {
                var value = document.getElementById('dir2').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir2").attr("style", value);
                dir2key = 0
            }
        }
        document.getElementById("dir3").onclick = function () {
            $("#content1Key").fadeOut(500);
            $("#content2Key").fadeOut(500);
            $("#content3Key").fadeIn(500);
            $("#content4Key").fadeOut(500);
            $("#content5Key").fadeOut(500);
            $("#content6Key").fadeOut(500);
            $("#content7Key").fadeOut(500);

            var dir3key = 0;
            if (dir3key == 0) {
                let target = document.getElementById('content3Key');
                setTimeout(function () {
                    animateScroll(target, 250);
                }, 600);

                $("#directory").show();

                var value = document.getElementById('dir7').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir7").attr("style", value);

                var value = document.getElementById('dir6').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir6").attr("style", value);

                var value = document.getElementById('dir5').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir5").attr("style", value);


                var value = document.getElementById('dir4').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir4").attr("style", value);

                var value = document.getElementById('dir3').getAttribute("style")
                value = value.replace(/ffffff/, "fffea4")
                $("#dir3").attr("style", value);

                var value = document.getElementById('dir2').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir2").attr("style", value);

                var value = document.getElementById('dir1').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir1").attr("style", value);

                dir3key = 1;
            } else {
                var value = document.getElementById('dir3').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir3").attr("style", value);
                dir3key = 0
            }
        }
        document.getElementById("dir4").onclick = function () {
            $("#content1Key").fadeOut(500);
            $("#content2Key").fadeOut(500);
            $("#content3Key").fadeOut(500);
            $("#content4Key").fadeIn(500);
            $("#content5Key").fadeOut(500);
            $("#content6Key").fadeOut(500);
            $("#content7Key").fadeOut(500);

            var dir4key = 0;
            if (dir4key == 0) {
                let target = document.getElementById('content4Key');
                setTimeout(function () {
                    animateScroll(target, 250);
                }, 600);

                $("#directory").show();

                var value = document.getElementById('dir7').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir7").attr("style", value);

                var value = document.getElementById('dir6').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir6").attr("style", value);

                var value = document.getElementById('dir5').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir5").attr("style", value);

                var value = document.getElementById('dir4').getAttribute("style")
                value = value.replace(/ffffff/, "fffea4")
                $("#dir4").attr("style", value);

                var value = document.getElementById('dir3').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir3").attr("style", value);

                var value = document.getElementById('dir2').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir2").attr("style", value);

                var value = document.getElementById('dir1').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir1").attr("style", value);


                dir4key = 1;
            } else {
                var value = document.getElementById('dir4').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir4").attr("style", value);
                dir4key = 0
            }
        }
        document.getElementById("dir5").onclick = function () {
            $("#content1Key").fadeOut(500);
            $("#content2Key").fadeOut(500);
            $("#content3Key").fadeOut(500);
            $("#content4Key").fadeOut(500);
            $("#content5Key").fadeIn(500);
            $("#content6Key").fadeOut(500);
            $("#content7Key").fadeOut(500);

            var dir5key = 0;
            if (dir5key == 0) {
                let target = document.getElementById('content5Key');
                setTimeout(function () {
                    animateScroll(target, 250);
                }, 600);

                $("#directory").show();

                var value = document.getElementById('dir7').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir7").attr("style", value);

                var value = document.getElementById('dir6').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir6").attr("style", value);

                var value = document.getElementById('dir5').getAttribute("style")
                value = value.replace(/ffffff/, "fffea4")
                $("#dir5").attr("style", value);

                var value = document.getElementById('dir4').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir4").attr("style", value);

                var value = document.getElementById('dir3').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir3").attr("style", value);

                var value = document.getElementById('dir2').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir2").attr("style", value);

                var value = document.getElementById('dir1').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir1").attr("style", value);


                dir5key = 1;
            } else {
                var value = document.getElementById('dir5').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir5").attr("style", value);
                dir5key = 0
            }
        }
        document.getElementById("dir6").onclick = function () {
            $("#content1Key").fadeOut(500);
            $("#content2Key").fadeOut(500);
            $("#content3Key").fadeOut(500);
            $("#content4Key").fadeOut(500);
            $("#content5Key").fadeOut(500);
            $("#content6Key").fadeIn(500);
            $("#content7Key").fadeOut(500);

            var dir6key = 0;
            if (dir6key == 0) {
                let target = document.getElementById('content6Key');
                setTimeout(function () {
                    animateScroll(target, 250);
                }, 600);

                $("#directory").show();
                var value = document.getElementById('dir7').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir7").attr("style", value);

                var value = document.getElementById('dir6').getAttribute("style")
                value = value.replace(/ffffff/, "fffea4")
                $("#dir6").attr("style", value);

                var value = document.getElementById('dir5').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir5").attr("style", value);

                var value = document.getElementById('dir4').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir4").attr("style", value);

                var value = document.getElementById('dir3').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir3").attr("style", value);

                var value = document.getElementById('dir2').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir2").attr("style", value);

                var value = document.getElementById('dir1').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir1").attr("style", value);

                dir6key = 1;
            } else {
                var value = document.getElementById('dir6').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir6").attr("style", value);
                dir6key = 0
            }
        }
        document.getElementById("dir7").onclick = function () {
            $("#content1Key").fadeOut(500);
            $("#content2Key").fadeOut(500);
            $("#content3Key").fadeOut(500);
            $("#content4Key").fadeOut(500);
            $("#content5Key").fadeOut(500);
            $("#content6Key").fadeOut(500);
            $("#content7Key").fadeIn(500);

            var dir7key = 0;
            if (dir7key == 0) {
                let target = document.getElementById('content7Key');
                setTimeout(function () {
                    animateScroll(target, 250);
                }, 600);

                $("#directory").show();


                var value = document.getElementById('dir7').getAttribute("style")
                value = value.replace(/ffffff/, "fffea4")
                $("#dir7").attr("style", value);

                var value = document.getElementById('dir6').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir6").attr("style", value);

                var value = document.getElementById('dir5').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir5").attr("style", value);

                var value = document.getElementById('dir4').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir4").attr("style", value);

                var value = document.getElementById('dir3').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir3").attr("style", value);

                var value = document.getElementById('dir2').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir2").attr("style", value);

                var value = document.getElementById('dir1').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir1").attr("style", value);


                dir7key = 1;
            } else {
                var value = document.getElementById('dir7').getAttribute("style")
                value = value.replace(/fffea4/, "ffffff")
                $("#dir7").attr("style", value);
                dir7key = 0
            }
        }


    });
    $(window).scroll(function () {

        if (loadhidekey == 1) {
            if ($(this).scrollTop() > 270 * heightRatio / 0.713265306122449) {
                $("#directory").show();
            } else {
                $("#directory").hide();
            }
        }

    });

</script>

<script>
    $(document).ready(function () {

        //设置默认


        var pNo = "height: 450px;width:450px;float: left;transition: all 0.3s;"
        var bgNo = "background-color: #f8c8b2;float: left;width: 25%;height: 480px;transition: all 0.3s;"
        var p = "height: 480px;width:480px;float: left;	transition: all 0.3s;"
        var bg = "background-color: #e2594f;float: left;width: 25%;height: 480px;transition: all 0.3s;"

        $("#p1").attr("style", pNo);
        $("#bg1").attr("style", bgNo);

        $("#p2").attr("style", p);
        $("#bg2").attr("style", bg);

        $("#p3").attr("style", pNo);
        $("#bg3").attr("style", bgNo);

        $("#p4").attr("style", pNo);
        $("#bg4").attr("style", bgNo);

        $("#m1").mouseover(
            function () {
                $("#p2").attr("style", pNo);
                $("#bg2").attr("style", bgNo);

                $("#p3").attr("style", pNo);
                $("#bg3").attr("style", bgNo);

                $("#p4").attr("style", pNo);
                $("#bg4").attr("style", bgNo);
                //1
                $("#p1").attr("style", p);
                $("#bg1").attr("style", bg);
            },

        ),
            $("#m2").mouseover(
                function () {
                    $("#p1").attr("style", pNo);
                    $("#bg1").attr("style", bgNo);

                    $("#p3").attr("style", pNo);
                    $("#bg3").attr("style", bgNo);

                    $("#p4").attr("style", pNo);
                    $("#bg4").attr("style", bgNo);
                    //2
                    $("#p2").attr("style", p);
                    $("#bg2").attr("style", bg);
                },
            ),
            $("#m3").mouseover(
                function () {
                    $("#p1").attr("style", pNo);
                    $("#bg1").attr("style", bgNo);

                    $("#p2").attr("style", pNo);
                    $("#bg2").attr("style", bgNo);

                    $("#p4").attr("style", pNo);
                    $("#bg4").attr("style", bgNo);
                    //3
                    $("#p3").attr("style", p);
                    $("#bg3").attr("style", bg);
                },
            ),
            $("#m4").mouseover(
                function () {
                    $("#p1").attr("style", pNo);
                    $("#bg1").attr("style", bgNo);

                    $("#p2").attr("style", pNo);
                    $("#bg2").attr("style", bgNo);

                    $("#p3").attr("style", pNo);
                    $("#bg3").attr("style", bgNo);
                    //4
                    $("#p4").attr("style", p);
                    $("#bg4").attr("style", bg);
                },
            )
        $("#m1").click(function () {
            window.location.href = "https://2021.igem.org/Team:SZPT-CHINA/Human_Practices";
        });
        $("#m2").click(function () {
            window.location.href = "https://2021.igem.org/Team:SZPT-CHINA/Communication";
        });
        $("#m3").click(function () {
            window.location.href = "https://2021.igem.org/Team:SZPT-CHINA/Education";
        });
        $("#m4").click(function () {
            window.location.href = "https://2021.igem.org/Team:SZPT-CHINA/Inclusivity";
        });

    });
</script>
<script>
    $(document).ready(function () {

        // $("#dir1").hover(function () {
        //     var value = document.getElementById('dir1').getAttribute("style")
        //     value = value.replace(/ffffff/, "fffea4")
        //     $("#dir1").attr("style", value);
        // }, function () {
        //     var value = document.getElementById('dir1').getAttribute("style")
        //     value = value.replace(/fffea4/, "ffffff")
        //     $("#dir1").attr("style", value);
        // });

        // $("#dir2").hover(function () {
        //     var value = document.getElementById('dir2').getAttribute("style")
        //     value = value.replace(/ffffff/, "fffea4")
        //     $("#dir2").attr("style", value);
        // }, function () {
        //     var value = document.getElementById('dir2').getAttribute("style")
        //     value = value.replace(/fffea4/, "ffffff")
        //     $("#dir2").attr("style", value);
        // });

        // $("#dir3").hover(function () {
        //     var value = document.getElementById('dir3').getAttribute("style")
        //     value = value.replace(/ffffff/, "fffea4")
        //     $("#dir3").attr("style", value);
        // }, function () {
        //     var value = document.getElementById('dir3').getAttribute("style")
        //     value = value.replace(/fffea4/, "ffffff")
        //     $("#dir3").attr("style", value);
        // });
        // $("#dir4").hover(function () {
        //     var value = document.getElementById('dir4').getAttribute("style")
        //     value = value.replace(/ffffff/, "fffea4")
        //     $("#dir4").attr("style", value);
        // }, function () {
        //     var value = document.getElementById('dir4').getAttribute("style")
        //     value = value.replace(/fffea4/, "ffffff")
        //     $("#dir4").attr("style", value);
        // });
        // $("#dir5").hover(function () {
        //     var value = document.getElementById('dir5').getAttribute("style")
        //     value = value.replace(/ffffff/, "fffea4")
        //     $("#dir5").attr("style", value);
        // }, function () {
        //     var value = document.getElementById('dir5').getAttribute("style")
        //     value = value.replace(/fffea4/, "ffffff")
        //     $("#dir5").attr("style", value);
        // });
        // $("#dir6").hover(function () {
        //     var value = document.getElementById('dir6').getAttribute("style")
        //     value = value.replace(/ffffff/, "fffea4")
        //     $("#dir6").attr("style", value);
        // }, function () {
        //     var value = document.getElementById('dir6').getAttribute("style")
        //     value = value.replace(/fffea4/, "ffffff")
        //     $("#dir6").attr("style", value);
        // });
        // $("#dir7").hover(function () {
        //     var value = document.getElementById('dir7').getAttribute("style")
        //     value = value.replace(/ffffff/, "fffea4")
        //     $("#dir7").attr("style", value);
        // }, function () {
        //     var value = document.getElementById('dir7').getAttribute("style")
        //     value = value.replace(/fffea4/, "ffffff")
        //     $("#dir7").attr("style", value);
        // });



    });
</script>

<body class="pc" id="main">


    <!-- loading -->
    <div id="loadingHome"
        style=" position: fixed; left: 0px;top: -100px; width: 100%;height: 115%;z-index: 999999999999;background-color: #f8c8b2;">
        <img id="loadImg"
            style=" position: relative; height: 1%;width: auto;left: 0%;margin:0px auto;top: 300px; text-align: center;display: none;"
            src="https://2021.igem.org/wiki/images/6/6f/T--SZPT-CHINA--iconGIF.png"></img>
    </div>


    <div id="downContent">
        <div class="mainImg">
            <div>
                <div id="bg1" style="background-color: #f8c8b2;float: left;width: 25%;">
                    <image id="p1" src="https://2021.igem.org/wiki/images/3/3c/T--SZPT-CHINA--HP-Practice.png"
                        class="smallImg"></image>
                </div>
                <div id="bg2" style="background-color: #f8c8b2;float: left;width: 25%;">

                    <image id="p2" src="https://2021.igem.org/wiki/images/0/0c/T--SZPT-CHINA--HP-Communcation.png"
                        class="smallImg"></image>

                </div>
                <div id="bg3" style="background-color: #f8c8b2;float: left;width: 25%;">
                    <image id="p3" src="https://2021.igem.org/wiki/images/6/62/T--SZPT-CHINA--HP-education.png"
                        class="smallImg"></image>
                </div>
                <div id="bg4" style="background-color: #f8c8b2;float: left;width: 25%;">
                    <image id="p4" src="https://2021.igem.org/wiki/images/d/da/T--SZPT-CHINA--HP-Inclusivity.png"
                        class="smallImg"></image>
                </div>
            </div>
            <div style="z-index: 99;position: absolute;">
                <image src="https://2021.igem.org/wiki/images/9/96/T--SZPT-CHINA--communcation-font.png"
                    style="margin-top: -50px;margin-left: 373px;"> </image>
            </div>
            <div style="margin-top: 50px;">
                <div id="m1" style="width: 480px;height: 480px;z-index: 9999;position: absolute;float:left;"></div>
                <div id="m2"
                    style="width: 480px;height: 480px;z-index: 9999;position: absolute;float:left;margin-left: 480px;">
                </div>
                <div id="m3"
                    style="width: 480px;height: 480px;z-index: 9999;position: absolute;float:left;margin-left: 960px;">
                </div>
                <div id="m4"
                    style="width: 480px;height: 480px;z-index: 9999;position: absolute;float:left;margin-left: 1440px;">
                </div>
            </div>

        </div>


        <!-- down -->
        <div style="width: 1920px;background-color: #ffffff;">
            <div id="blue" style="float:left; height: 15800px; width: 55px;background-color: #2588d4;">
            </div>
            <div id="directory" style="float:left;margin-top: 8vh;z-index: 990;position: fixed;">
                <div
                    style="margin-top: 9vh;background-color: #dd544d;margin-left: 6vw;border-radius:10px;padding: 1vw;width: 18vw;">
                    <h3 id="dir0p" style="color:#fffea4;padding-left: 10%;font-size:1.8rem;">
                        Communication</h3>
                    <div style="margin-left: 13%;">
                        <div id="dir1" style="color:#ffffff;width: auto;height: 6vh;margin-top: 3vh;">
                            <p id="dir1p" style="font-size: 1.2rem;padding-top: 0vh;">
                                Introduction
                            </p>
                        </div>

                        <div id="dir2" style="color:#ffffff;width: auto;height:6vh;">
                            <p id="dir2p" style="font-size: 1.2rem;padding-top:0vh;">
                                Fire Theme
                            </p>
                        </div>

                        <div id="dir3" style="color:#ffffff;width: auto;height: 6vh;">
                            <p id="dir3p" style="font-size: 1.2rem;padding-top: 0vh;">
                                Burn Injury Theme</p>
                        </div>

                        <div id="dir4" style="color:#ffffff;width: auto;height:6vh;">
                            <p id="dir4p" style="font-size:1.2rem;padding-top: 0vh;">
                                Biology Theme
                            </p>
                        </div>

                        <div id="dir5" style="color:#ffffff;width: auto;height: 6vh;">
                            <p id="dir5p" style="font-size: 1.2rem;padding-top: 0vh;">
                                Synthetic Biology Theme
                            </p>
                        </div>

                        <div id="dir6" style="color:#ffffff;width: auto;height: 9vh;">
                            <p id="dir6p" style="font-size: 1.2rem;padding-top: 0vh;">
                                Featured Events (Including All Themes)
                            </p>
                        </div>

                        <div id="dir7" style="color:#ffffff;width: auto;height: 6vh;">
                            <p id="dir7p" style="font-size: 1.2rem;padding-top: 0vh;">
                                Materials</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="content"
                style="float:left;width: 1173px;margin-left: 397px;margin-top: 100px;padding-left:100px;background-color: #ffffff;text-align: justify;">

                <!-- 1 -->

                <div id="content1Key" class="k">

                    <div id="content1" class="yj" style="margin-top: 50px;">1. Introduction

                    </div>
                    <div class="pb">
                        The dissemination and public outreach of synthetic biology are very important for us. We invited
                        Wu
                        Jie,
                        a professional with rich experience in information communication and social organizations, to
                        provide us
                        with guidance. She is a social responsibility manager of family enterprises in Hong Kong.
                        <br>
                        After in-depth and creative discussion, our team listed <span
                            style="font-weight: 900;">different
                            topics
                        </span>(mainly focusing on synthetic
                        biology) and decided to carry out <span style="font-weight: 900;">different forms </span>of
                        communication practice according to <span style="font-weight: 900;">different age
                            groups. </span>
                    </div>


                    <img src="https://2021.igem.org/wiki/images/c/cd/T--SZPT-CHINA--conmmuncation-pic-1.png"
                        style="margin-left: 248px; margin-top: 50px;"> </img>

                    <div class="tz" style="margin-top: 50px;">Figure 1. Professional guidance for Communication Module
                        on July 26, 2021


                    </div>

                    <img src="https://2021.igem.org/wiki/images/9/9e/T--SZPT-CHINA--conmmuncation-pic-2.png"
                        style="margin-left: 237px;margin-top: 50px;"> </img>

                    <div class="tz" style="margin-top: 50px;">Figure 2. Professional guidance for Communication Module
                        on July 26, 2021
                    </div>

                    <div class="pb">
                        <span style="font-weight:900">Communication is also an art.</span>
                        <br>
                        In order to promote synthetic biology more effectively, we make full use of existing resources
                        and
                        create new resources to attract more people at the same time. We also came up with educational
                        and
                        interesting activities, such as handmade DNA, fluorescent protein DIY, puzzles, poker games and
                        so
                        on.
                        <br>
                        ( <span style="color: blue;" id="down1"><u>
                                Click here to find “Materials” in Item 7 below
                            </u> </span>)
                    </div>
                </div>
                <!-- 2 -->
                <div id="content2Key" class="k">


                    <div id="content2" class="yj" style="margin-top: 50px;">2. Fire
                        Theme

                    </div>
                    <div class="ej">
                        2.1 Communication Practice for Government Agencies
                    </div>

                    <div class="sj">
                        Communicate With Firefighters
                    </div>

                    <div class="pb">
                        In July, our team actively communicated with <span style="font-weight: 900;">Xili Fire Squadron
                        </span>and <span style="font-weight: 900" ;>found their learning needs.</span>
                        According to the statistics of the local fire department, more than 50% of firefighters do not
                        know
                        what hazardous chemicals are, which poses a potential threat to their safety when extinguishing
                        fire. Therefore, we have <span style="font-weight: 900;">promoted synthetic biology and
                            chemistry
                        </span>for firefighters and listed which
                        chemicals can not be poured with water when on fire.
                        <br>
                        <br>
                        Firefighters support our practice very much and <span style="font-weight: 900;">suggest that we
                            carry out relevant educational
                            practices in urban villages</span>. There are five main reasons:
                        <br>
                        1. Lack of supervision over children
                        <br>
                        2. Low education level of parents
                        <br>
                        3. Crowded housing
                        <br>
                        4. Low socio-economic status
                        <br>
                        5. Many flammable factors (electric vehicles, stacked debris, pulling wires without permission,
                        etc.)
                        <br>

                        (Click here to further cooperate with firefighters:<span id="down2"
                                style="color: blue;"><u>"Entering the
                                Community"</u></span>
                        &
                        <span id="down3" style="color: blue;"><u>"Synthetic Biology
                                Behind Firefighting"</u></span>)

                        <br>
                        <br>

                    </div>
                    <img src="https://2021.igem.org/wiki/images/a/a0/T--SZPT-CHINA--conmmuncation-pic-3.png"
                        style="margin-left: 205px;margin-top: 50px;"></img>
                    <div class="tz" style="margin-top:50px;">Figure 1. List of common hazardous chemicals on July 30,
                        2021


                        <br>
                        <span style="font-weight: 900;">（Cover）</span>
                    </div>
                    <img src="https://2021.igem.org/wiki/images/a/a9/T--SZPT-CHINA--conmmuncation-pic-4.png"
                        style="margin-left: 304px;margin-top: 50px;"></img>
                    <div class="tz" style="margin-top:50px">Figure 2. List of common hazardous chemicals on July 30,
                        2021
                        <br>
                        <span style="font-weight: 900;"> (This screenshot is automatically translated by the
                            software)</span>

                    </div>


                    <div class="ej">
                        2.2 Communication Practice for the General Public
                    </div>

                    <div id="down2key" class="sj">
                        Entering the Community
                    </div>

                    <div class="pb">
                        On July 30th, we invited firefighters to <span style="font-weight: 900;">conduct a fire drill
                        </span>in
                        the community square, while our team
                        members <span>publicized burn knowledge </span>on the sidelines .
                    </div>


                    <div class="ssj">
                        ●Address
                    </div>
                    <div class="pb">
                        Xili Street, Nanshan District, Shenzhen, Guangdong Province, China
                    </div>

                    <div class="ssj">
                        ●Pattern
                    </div>
                    <div class="pb">
                        Set up a fire drill tent to simulate smoke escape
                        <br>
                        Simulation of fire extinguishing on site
                    </div>
                    <img src="https://2021.igem.org/wiki/images/9/90/T--SZPT-CHINA--conmmuncation-pic-5.png"
                        style="margin-left: 167px;margin-top: 50px;width: 700px;"></img>
                    <div class="tz" style="margin-top: 50px;">Figure 1. Promoted knowledge of burns on July 30, 2021
                    </div>
                    <img src="https://2021.igem.org/wiki/images/0/08/T--SZPT-CHINA--conmmuncation-pic-6.png"
                        style="margin-left: 167px;margin-top: 50px;width:700px;"></img>

                    <div class="tz" style="margin-top: 50px;">Figure 2. Simulated fire extinguishing on July 30, 2021
                    </div>


                </div>
                <!-- 3 -->

                <div id="content3Key" class="k">
                    <div id="content3" class="yj" style="margin-top: 50px;">3. Burn Injury
                        Theme

                    </div>
                    <div class="ej">
                        Communication Practice for the Elderly and the General Public
                    </div>

                    <div class="sj">
                        Into the Community Again
                    </div>

                    <div class="pb">
                        With the rapid development of technology and society, <span style="font-weight: 900;">the older
                            generation </span>is gradually falling behind.
                        They don't even know what <span style="font-weight: 900;">synthetic biology </span>is - a branch
                        of
                        science that just emerged in the 21st
                        century.

                        Our team members spread knowledge about burns and promote synthetic biology in the
                        community.<span style="font-weight: 900;"> To our
                            surprise, many children and parents also actively participated when they passed by.</span>
                        We
                        also
                        encourage
                        the younger generation to interact with the elderly and leave the contact information of the
                        team
                        for
                        follow-up consultation.
                    </div>
                    <div class="ssj">●Community</div>
                    <div class="pb">
                        Xili Street, Nanshan District, Shenzhen, Guangdong Province<br>
                        Buji Community, Longgang District, Shenzhen, Guangdong Province
                    </div>


                    <img src="https://2021.igem.org/wiki/images/2/28/T--SZPT-CHINA--conmmuncation-pic-7.png"
                        style="margin-left: 186px;margin-top: 50px;width: 700px;"></img>
                    <div class="tz" style="margin-top:50px">Figure 1. Popularized burn knowledge in Buji Community on May
                        15, 2021
                    </div>
                    <img src="https://2021.igem.org/wiki/images/3/3e/T--SZPT-CHINA--conmmuncation-pic-8.png"
                        style="margin-left: 186px;margin-top: 50px;width: 700px;"></img>

                    <div class="tz" style="margin-top:50px">Figure 2. Popularized burn knowledge in Buji Community on May
                        15, 2021


                    </div>

                    <img src="https://2021.igem.org/wiki/images/c/c5/T--SZPT-CHINA--conmmuncation-pic-9.png"
                        style="margin-left: 174px;margin-top: 50px;width: 700px;"></img>

                    <div class="tz" style="margin-top:50px">Figure 3. Popularized burn knowledge in Xili Street on July
                        30, 2021
                    </div>

                </div>

                <!-- 4 -->

                <div id="content4Key" class="k">
                    <div id="content4" class="yj" style="margin-top: 50px;">4. Biology Theme

                    </div>
                    <div class="ej">
                        4.1 Communication Practice for Pupils and Children
                    </div>

                    <div class="sj">
                        Bio-knowledge Short Video
                    </div>

                 

                    <video src="https://2021.igem.org/wiki/images/3/3c/T--SZPT-CHINA--communication-video-1.mp4"
                        controls style="margin-top: 50px;margin-left: 64px;"> </video>


                </div>
                <!-- 5 -->

                <div id="content5Key" class="k">
                    <div id="content5" class="yj" style="margin-top: 50px;"> 5. Synthetic Biology Theme

                    </div>
                    <div class="ej">
                        5.1 Communication Practice for High School Students
                    </div>

                    <div class="sj">
                        Synthetic Biology Enters the Campus
                    </div>

                    <div class="pb">
                        Students <span style="font-weight: 900;"> have strong curiosity and high enthusiasm</span> in
                        high
                        school, which is an important period for us
                        to <span style="font-weight: 900;">cultivate their interest in synthetic biology.</span>
                        However,
                        they
                        rarely have the opportunity to study
                        synthetic biology in the classroom. Our team decided to give a lecture on synthetic biology at
                        <span style="font-weight: 900;">Shenzhen
                            Guangming District High School.</span>
                    </div>

                    <img src="https://2021.igem.org/wiki/images/1/10/T--SZPT-CHINA--conmmuncation-pic-13.png"
                        style="margin-top: 50px;margin-left: 166px;">
                    <div class="tz" style="margin-top: 50px;">Figure 1. A lecture on synthetic biology on May 26,
                        2021(Q&A section)
                    </div>



                    <div class="ej">
                        5.2 Communication Practice for College Students
                    </div>

                    <div class="sj">
                        Summer Camp
                    </div>

                    <div class="pb">
                        Our team investigated the situation of summer students and organized summer camp activities for
                        some
                        of
                        them.
                        <br>
                        <br>
                        <span style="font-weight: 900;"> ●Address</span>
                        <br>
                        <br>
                        A laboratory in Shenzhen Polytechnic
                        <br>
                        <br>
                        <span style="font-weight: 900;"> ●The following is the schedule of summer camp.</span>
                    </div>

                    <img src="https://2021.igem.org/wiki/images/7/7b/T--SZPT-CHINA--conmmuncation-pic-14.png"
                        style="width: 800px;margin-left: 135px;">

                    <video src="https://2021.igem.org/wiki/images/5/55/T--SZPT-CHINA--communication-video-2.mp4"
                        controls style="margin-top: 50px;margin-left: 224px;"> </video>
                    <div class="tz">For details, please click to watch the video</div>

                    <div class="ej">
                        5.3 Communication Practice for the General Public
                    </div>

                    <div class="sj">
                        5.3.1 Synthesize BC Film Together
                    </div>
                    <div class="pb">
                        With the rapid development of Internet technology, <span style="font-weight: 900;">electronic
                            games
                            have
                            become a popular form of
                            entertainment.</span> With reference to the game mode of 2048 MINI Game, SZPT-CHINA created
                        a
                        new
                        "<span style="font-weight: 900;">Synthesize
                            BC Film Together" </span>on August 8th, which is <span style="font-weight: 900;">closely
                            related
                            to
                            synthetic biology, and applied the red
                            light sensor module in the project design.</span>
                        <br>
                        <br>
                        We promote games on campus and reach more people through the Internet. This is really <span
                            style="font-weight: 900;">game-based
                            learning.</span> Most players are willing to learn synthetic biology that is closely related
                        to
                        the
                        game, not
                        only because they want to win, but also because <span style="font-weight: 900;">they are
                            attracted
                            by
                            the novelty and fun of the game.</span>
                        <br>

                    </div>

                    <image src="https://2021.igem.org/wiki/images/9/98/T--SZPT-CHINA--communication-game.png"
                        class="pic" style="margin-left:350px;width: 350px;">

                    </image>
                    <div class="tz">A Picture of the Game</div>
                    <div class="sj">
                        5.3.2 A Live Broadcast Course of Synthetic Biology
                    </div>

                    <div class="pb">
                        The new crown epidemic has triggered a wave of live streaming online, and many websites have
                        launched
                        online courses. In order to maximize the number of people studying synthetic biology, our team
                        members
                        decided to start a dream journey of synthetic biology. <span style="font-weight: 900;">We hold a
                            live
                            broadcast course of synthetic
                            biology at Bilibili, and promote our team projects to popularize burn knowledge.</span>
                    </div>

                    <img src="https://2021.igem.org/wiki/images/5/55/T--SZPT-CHINA--conmmuncation-pic-15.png"
                        style="margin-top: 50px;margin-left: 232px;">
                    <div class="tz" style="margin-top: 50px;">Figure 1. The audience is listening the live course on
                        September 11, 2021
                    </div>

                    <img src="https://2021.igem.org/wiki/images/6/60/T--SZPT-CHINA--conmmuncation-pic-16.png"
                        style="margin-top: 50px;margin-left: 232px;">
                    <div class="tz" style="margin-top: 50px;">Figure 2. The audience is listening the live course on
                        September 11, 2021
                    </div>

                </div>
                <!-- 6 -->

                <div id="content6Key" class="k">
                    <div id="content6" class="yj" style="margin-top: 50px;">6. Featured Events (Including All Themes)

                    </div>
                   
                
                    <div id="down3key" class="ej">
                        6.1 Synthetic Biology Behind Firefighting
                    </div>

                    <div class="pb">
                        Interest in the content of the learned knowledge may become a motivation for learning.
                        <br>
                        <div style="margin-left: 926px;">--Zankov</div>

                        <br>
                        We quickly started the journey of children into the world of synthetic biology, using <span
                            style="font-weight: 900;">attractive
                            resources</span> such as animation videos, puzzles and key chains.
                        <br>
                        <span style="font-weight: 900;"> ●Details</span>
                        <br>
                        We held <strong>three </strong>courses at <span style="font-weight: 900;">
                            Yangqi
                            Culture and Art Training Institution:</span>
                        <br>
                        1.Fire safety (we invite firefighters to this class)
                        <br>
                        2.Kill the <i>Pseudomonas aeruginosa </i>PAO1 Together
                        <br>
                        <span style="font-weight: 900;">3.Enter the world of synthetic biology</span>
                    </div>
                    <img src="https://2021.igem.org/wiki/images/2/2b/T--SZPT-CHINA--conmmuncation-pic-18.png"
                        style="margin-top: 50px;margin-left: 215px;">

                    <div class="tz" style="margin-top: 50px;">Figure 1. Fire Safety Lesson on July 23, 2021(from a
                        firefighter)
                    </div>


                    <img src="https://2021.igem.org/wiki/images/b/be/T--SZPT-CHINA--conmmuncation-pic-19.png"
                        style="margin-top: 50px;margin-left: 219px;">

                    <div class="tz" style="margin-top: 50px;">Figure 2. Kill the <i>Pseudomonas aeruginosa </i>PAO1
                        Together on July 23, 2021 (from SZPT-CHINA)



                    </div>

                    <img src="https://2021.igem.org/wiki/images/0/06/T--SZPT-CHINA--conmmuncation-pic-20.png"
                        style="margin-top: 50px;margin-left:215px;">

                    <div class="tz" style="margin-top: 50px;">Figure 3. Jigsaw puzzle on July 23, 2021 (Kill the
                        <i>Pseudomonas aeruginosa </i>PAO1 Together & Into Synthetic Biology)


                    </div>

                    <img src="https://2021.igem.org/wiki/images/6/6e/T--SZPT-CHINA--conmmuncation-pic-21.png"
                        style="margin-top: 50px;margin-left:223px;">

                    <div class="tz" style="margin-top: 50px;">Figure 4. Group photo on July 23, 2021
                         
                    </div>




                   
                </div>
                <!-- 7 -->


                <div id="content7Key" class="k">
                    <div id="content7" class="yj" style="margin-top: 50px;">7. Materials

                    </div>
                    <img src="https://2021.igem.org/wiki/images/a/a8/T--SZPT-CHINA--conmmuncation-pic-26.png"
                        style="margin-top: 50px;">

                    <!-- 第一行 -->
                    <div style="display: flex;margin-left: 122px;">

                        <div id="pic1">
                            <div>
                                <img class="picBlue"
                                    src="https://2021.igem.org/wiki/images/5/5b/T--SZPT-CHINA--conmmuncation-pic-27.png">
                            </div>
                            <div>
                                <h6 class="nameRed">2021 SZPT-CHINA Promotion Video
                                </h6>
                            </div>
                        </div>
                        <div id="pic2">
                            <div>
                                <img class="picBlue"
                                    src="https://2021.igem.org/wiki/images/1/12/T--SZPT-CHINA--conmmuncation-pic-35.png">
                            </div>
                            <div>
                                <h6 class="nameRed">Educational Short Film
                                    on Bacterial Warfare

                                </h6>
                            </div>
                        </div>

                        <div id="picRight1">
                            <div>
                                <img class="picBlue"
                                    src="https://2021.igem.org/wiki/images/8/81/T--SZPT-CHINA--conmmuncation-pic-29.png">
                            </div>
                            <div>
                                <h6 class="nameBlue">Brochures
                                    About Burn Knowledge


                                </h6>
                            </div>

                        </div>

                        <div id="picRight2">
                            <div>
                                <img class="picBlue"
                                    src="https://2021.igem.org/wiki/images/c/c1/T--SZPT-CHINA--conmmuncation-pic-34.png">
                            </div>
                            <div>
                                <h6 class="nameBlue">Jigsaws About Synthetic Biology

                                </h6>
                            </div>
                        </div>



                    </div>
                    <!-- 第二行 -->
                    <div style="display: flex;margin-left: 122px;">

                        <div id="pic3">
                            <div>
                                <img class="picBlue"
                                    src="https://2021.igem.org/wiki/images/6/64/T--SZPT-CHINA--conmmuncation-pic-28.png">
                            </div>
                            <div>
                                <h6 class="nameRed">Introduction to
                                    Burn Common Sense
                                </h6>
                            </div>
                        </div>
                        <div id="pic4">
                            <div>
                                <img class="picBlue"
                                    src="https://2021.igem.org/wiki/images/a/a3/T--SZPT-CHINA--conmmuncation-pic-36.png">
                            </div>
                            <div>
                                <h6 class="nameRed">A Short Story of the GLUCONACETOBACTER XYLINUS


                                </h6>
                            </div>
                        </div>

                        <div id="picRight3">
                            <div>
                                <img class="picBlue"
                                    src="https://2021.igem.org/wiki/images/b/b9/T--SZPT-CHINA--conmmuncation-pic-31.png">
                            </div>
                            <div>
                                <h6 class="nameBlue">A Bacterial War Drawing Book on Synthetic Biology


                                </h6>
                            </div>

                        </div>

                        <div id="picRight4">
                            <div>
                                <img class="picBlue"
                                    src="https://2021.igem.org/wiki/images/4/41/T--SZPT-CHINA--conmmuncation-pic-30.png">
                            </div>
                            <div>
                                <h6 class="nameBlue">Skin Knowledge
                                    Handbook


                                </h6>
                            </div>
                        </div>



                    </div>

                    <!-- 第三行 -->
                    <div style="display: flex;margin-left: 122px;">

                        <div id="pic5">
                            <div>
                                <img class="picBlue"
                                    src="https://2021.igem.org/wiki/images/7/73/T--SZPT-CHINA--conmmuncation-pic-37.png">
                            </div>
                            <div>
                                <h6 class="nameRed">Basic Biological Knowledge
                                </h6>
                            </div>
                        </div>
                        <div id="pic6">
                            <div>
                                <img class="picBlue"
                                    src="https://2021.igem.org/wiki/images/3/3d/T--SZPT-CHINA--conmmuncation-pic-38.png">
                            </div>
                            <div>
                                <h6 class="nameRed">Proper Treatment After Burns


                                </h6>
                            </div>
                        </div>

                        <div id="picRight5">
                            <div>
                                <img class="picBlue"
                                    src="https://2021.igem.org/wiki/images/9/9d/T--SZPT-CHINA--conmmuncation-pic-33.png">
                            </div>
                            <div>
                                <h6 class="nameBlue">Key Fobs for Synthetic Biology



                                </h6>
                            </div>

                        </div>

                        <div id="picRight6">
                            <div>
                                <img class="picBlue"
                                    src="https://2021.igem.org/wiki/images/3/3c/T--SZPT-CHINA--conmmuncation-pic-32.png">
                            </div>
                            <div>
                                <h6 class="nameBlue">A of Playing-cards About Synthetic Biology


                                </h6>
                            </div>
                        </div>



                    </div>
                    <!-- 第四行 -->
                    <div style="display: flex;margin-left: 122px;">

                        <div id="pic7">
                            <div>
                                <img class="picBlue"
                                    src="https://2021.igem.org/wiki/images/0/09/T--SZPT-CHINA--conmmuncation-pic-39.png"
                                    style="width: 100px;margin-left: 41px;">
                            </div>
                            <div>
                                <h6 class="nameRed" style="width:100px"> Audio Courses Based on Drawing Books
                                </h6>
                            </div>
                        </div>

                        <div id="pic8">
                            <div>
                                <img class="picBlue"
                                    src="https://2021.igem.org/wiki/images/a/ac/T--SZPT-CHINA--conmmuncation-pic-41.png"
                                    style="width: 100px;margin-left: 40px;">
                            </div>
                            <div>
                                <h6 class="nameRed" style="width: 100px;">Emoji Pack About Promotion Video


                                </h6>
                            </div>
                        </div>


                        <div id="pic9">
                            <div>
                                <img class="picBlue"
                                    src="https://2021.igem.org/wiki/images/e/ee/T--SZPT-CHINA--conmmuncation-pic-40.png"
                                    style="width: 100px;margin-left: 40px;">
                            </div>
                            <div>
                                <h6 class="nameRed" style="width: 100px;">BCBC Games
                                </h6>
                            </div>
                        </div>





                    </div>

                    <div class="pb">Our team has integrated all the following resources for you to click:</div>


                    <div class="ej">
                        7.1 Online Materials
                    </div>
                    <!-- 展开 -->
                    <div class="pb">
                        <div style="display: flex;" class="qa">
                            <div id="two1">
                                ● 2021 SZPT-CHINA Promotion Video
                            </div>
                            <!-- <i id="two1Triangle"
                                style="margin-bottom: 5px; display: inline-block;width: 0;height: 0;border: 10px solid transparent;border-top: 10px solid #f2756f;margin-top: 8px;margin-left: 10px;"></i>
                         -->
                        </div>
                        <div id="two1Content" style="text-align: left;">
                            <br>
                            We drew inspiration from"Journey to the West" and made a short film closely related to the
                            story.


                            <video
                                src="https://2021.igem.org/wiki/images/a/a2/T--SZPT-CHINA--Communication-video-Online-1.mp4"
                                controls style="margin-top: 50px;margin-left: 26px;width: 1000px;"> </video>

                        </div>


                        <div style="display: flex;" class="qa">
                            <div id="two2">
                                ● Educational Short Film on Bacterial Warfare
                            </div>
                            <!-- <i id="two2Triangle"
                                style="margin-bottom: 5px; display: inline-block;width: 0;height: 0;border: 10px solid transparent;border-top: 10px solid #f2756f;margin-top: 8px;margin-left: 10px;"></i>
                       -->
                        </div>

                        <div id="two2Content" style="text-align: left;">
                            <br>
                            We tell the story of a burn patient and how to kill <i>Pseudomonas aeruginosa </i>PAO1 to
                            help him
                            recover.

                            <video
                                src="https://2021.igem.org/wiki/images/2/20/T--SZPT-CHINA--Communication-video-Online-2.mp4"
                                controls style="margin-top: 50px;margin-left: 26px;width: 1000px;"> </video>
                        </div>

                        <div style="display: flex;" class="qa">
                            <div id="two3">
                                ● Introduction to Burn Common Sense
                            </div>
                            <!-- <i id="two3Triangle"
                                style="margin-bottom: 5px; display: inline-block;width: 0;height: 0;border: 10px solid transparent;border-top: 10px solid #f2756f;margin-top: 8px;margin-left: 10px;"></i>
                         -->
                        </div>
                        <div id="two3Content" style="text-align: left;">
                            <br>
                            Through the dialogue between the little boy and the doctor, we improve the burn knowledge
                            and
                            introduce the methods to prevent burns.

                            <video
                                src="https://2021.igem.org/wiki/images/3/30/T--SZPT-CHINA--Communication-video-Online-3.mp4"
                                controls style="margin-top: 50px;margin-left: 26px;width: 1000px;"> </video>

                        </div>
                        <div style="display: flex;" class="qa">
                            <div id="two4">
                                ● Proper Treatment After Burns
                            </div>
                            <!-- <i id="two4Triangle"
                                style="margin-bottom: 5px; display: inline-block;width: 0;height: 0;border: 10px solid transparent;border-top: 10px solid #f2756f;margin-top: 8px;margin-left: 10px;"></i>
                        -->
                        </div>
                        <div id="two4Content" style="text-align: left;">
                            <br>
                            Tell everyone how to deal with burns correctly with a vivid performance.



                            <video
                                src="https://2021.igem.org/wiki/images/d/d5/T--SZPT-CHINA--Communication-video-Online-4.mp4"
                                controls style="margin-top: 50px;margin-left: 26px;width: 1000px;"> </video>
                        </div>

                        <div style="display: flex;" class="qa">
                            <div id="two5">
                                ● A Short Story of the <i>Gluconacetobacter hansenii</i> ATCC 53582

                            </div>
                            <!-- <i id="two5Triangle"
                                style="margin-bottom: 5px; display: inline-block;width: 0;height: 0;border: 10px solid transparent;border-top: 10px solid #f2756f;margin-top: 8px;margin-left: 10px;"></i>
                         -->
                        </div>
                        <div id="two5Content" style="text-align: left;">
                            <br>
                            We anthropomorphized <i>Gluconacetobacter hansenii</i> ATCC 53582 and told the story of the life as
                            a
                            member of SZPT-CHINA.


                            <video
                                src="https://2021.igem.org/wiki/images/b/b0/T--SZPT-CHINA--Communication-video-Online-5.mp4"
                                controls style="margin-top: 50px;margin-left: 26px;width: 1000px;"> </video>
                        </div>
                        <div style="display: flex;" class="qa">
                            <div id="two6">
                                ● Basic Biological Knowledge

                            </div>
                            <!-- <i id="two6Triangle"
                                style="margin-bottom: 5px; display: inline-block;width: 0;height: 0;border: 10px solid transparent;border-top: 10px solid #f2756f;margin-top: 8px;margin-left: 10px;"></i>
                         -->
                        </div>
                        <br>

                        <div id="two6Content" style="text-align: left;">
                            <br>
                            We use cardboard to make cute cartoon characters and promote basic biological knowledge
                            through
                            shooting.


                            <video
                                src="https://2021.igem.org/wiki/images/c/c8/T--SZPT-CHINA--Communication-video-Online-6.mp4"
                                controls style="margin-top: 50px;margin-left: 26px;width: 1000px;"> </video>
                        </div>
                        <div style="display: flex;" class="qa" >
                            <div id="two7">
                                ● BCBC Games
                            </div>
                            <!-- <i id="two7Triangle"
                                style="margin-bottom: 5px; display: inline-block;width: 0;height: 0;border: 10px solid transparent;border-top: 10px solid #f2756f;margin-top: 8px;margin-left: 10px;"></i>
                        -->
                        </div>
                        <div id="two7Content" style="text-align: left;">
                            <br>
                            SZPT-CHINA has created a new game of synthetic BC film with reference to the game mode of
                            2048
                            MINI
                            Game.
                            <br>
                            <image
                                src="https://2021.igem.org/wiki/images/e/e8/T--SZPT-CHINA--Communication-png-Online-7.png"
                                class="pic" style="width: 400px;margin-left: 298px;"></image>
                        </div>

                        <div style="display: flex;" class="qa" >
                            <div id="two8">
                                ● Emoji Pack About Promotion Video

                            </div>
                            <!-- <i id="two8Triangle"
                                style="margin-bottom: 5px; display: inline-block;width: 0;height: 0;border: 10px solid transparent;border-top: 10px solid #f2756f;margin-top: 8px;margin-left: 10px;"></i>
                        -->
                        </div>
                        <div id="two8Content" style="text-align: left;">
                            <br>
                            SZPT-CHINA produced the Promotion Video's Character Emoji Pack to attract more people to
                            participate
                            in our project and synthetic biology.
                            <br>
                            <image
                                src="https://2021.igem.org/wiki/images/0/06/T--SZPT-CHINA--Communication-png-Online-8.png"
                                class="pic" style="width: 400px;margin-left: 300px;"></image>
                        </div>
                        <div style="display: flex;" class="qa" >
                            <div id="two9">
                                ● Audio Courses Based on Drawing Books

                            </div>
                            <!-- <i id="two9Triangle"
                                style="margin-bottom: 5px; display: inline-block;width: 0;height: 0;border: 10px solid transparent;border-top: 10px solid #f2756f;margin-top: 8px;margin-left: 10px;"></i>
                         -->
                        </div>

                        <div id="two9Content" style="text-align: left;">
                            <br>
                            Our team recorded audio books in different languages based on basic biological knowledge of
                            drawing
                            books, which can be listened to by young and old people.
                        </div>

                    </div>
                    <div class="sj">
                        7.2 Offline Materials
                    </div>

                    <div class="pb" id="right1">
                        ●Brochures About Burn Knowledge
                        <br>
                        We made a triple brochure to publicize burn knowledge.
                    </div>
                    <img src="https://2021.igem.org/wiki/images/8/81/T--SZPT-CHINA--conmmuncation-pic-29.png"
                        style="margin-top:50px;margin-left: 255px;">
                    <div class="tz" style="margin-top:50px;">To view the electronic version of this file, click: <a
                            href="https://2021.igem.org/wiki/images/7/75/T--SZPT-CHINA--communication-ppt-1.pptx">Pamphlet
                            on
                            burn knowledge</a></div>


                    <div class="pb" id="right2">
                        ●Skin Knowledge Handbook
                        <br>
                        A skin knowledge handbook jointly prepared by WHU-China、HUST2-China、SZPT- CHINA and NUDT-China.
                        Help
                        you
                        acquire related skin knowledge.
                    </div>

                    <img src="https://2021.igem.org/wiki/images/4/41/T--SZPT-CHINA--conmmuncation-pic-30.png"
                        style="margin-top:50px;margin-left: 175px;">
                    <div class="tz" style="margin-top:50px;">To view the electronic version of this file, click: <a
                            href="https://2021.igem.org/wiki/images/d/d4/T--SZPT-CHINA--communication-ppt-2.pptx">Skin
                            Knowledge
                            Handbook</a></div>
                    <div class="pb" id="right3">
                        ●Jigsaws About Synthetic Biology
                        <br>
                        We use lovely cartoon pictures to vividly show the battle process of <i>Gluconacetobacter hansenii</i> ATCC 53582  and <i>Pseudomonas aeruginosa </i>PAO1 in burn.
                    </div>

                    <img src="https://2021.igem.org/wiki/images/b/b9/T--SZPT-CHINA--conmmuncation-pic-31.png"
                        style="margin-top:50px;margin-left: 202px;">
                    <div class="tz" style="margin-top:50px;">To view the electronic version of this file, click: <a
                            href="https://2021.igem.org/wiki/images/c/c2/T--SZPT-CHINA--communication-ppt-3.pptx">Jigsaws
                            About
                            Synthetic Biology</a></div>


                    <div class="pb" id="right4">
                        ●A of Playing-cards About Synthetic Biology
                        <br>
                        We use some icons of biological nouns to make a deck of playing cards, which is most people's
                        favorite
                        pastime. Players can learn synthetic biology while relaxing.
                    </div>

                    <img src="https://2021.igem.org/wiki/images/3/3c/T--SZPT-CHINA--conmmuncation-pic-32.png"
                        style="margin-top:50px;margin-left: 205px;">
                    <div class="tz">To view the electronic version of this file,
                        click: <a href="https://2021.igem.org/wiki/images/7/71/T--SZPT-CHINA--communication-ppt-4.pptx">
                            A
                            of
                            Playing-cards About Synthetic Biology</a></div>


                    <div class="pb" id="right5">
                        ●Key Fobs for Synthetic Biology
                        <br>
                        Cartoon key fobs for proteins involved in the experiment and bacteria.
                    </div>

                    <img src="https://2021.igem.org/wiki/images/9/9d/T--SZPT-CHINA--conmmuncation-pic-33.png"
                        style="margin-top:50px;margin-left: 266px;">
                    <div class="tz" style="margin-top:50px;">To view the electronic version of this file, click: <a
                            href="https://2021.igem.org/wiki/images/c/cc/T--SZPT-CHINA--communication-ppt-5.pptx">
                            Key Fobs
                            for
                            Synthetic Biology </a></div>


                    <div class="pb" id="right6">
                        ●A Bacterial War Drawing Book on Synthetic Biology
                        <br>
                        We added dialogue to the educational video of bacterial war and made a picture book suitable for
                        children to read .
                    </div>

                    <img src="https://2021.igem.org/wiki/images/c/c1/T--SZPT-CHINA--conmmuncation-pic-34.png"
                        style="margin-top:50px;margin-left: 193px;">
                    <div class="tz" style="margin-top:50px;">To view the electronic version of this file,
                        click: <a
                            href="https://2021.igem.org/wiki/images/f/f4/T--SZPT-CHINA--communication-ppt-6.pptx">A
                            Bacterial War Drawing Book on Synthetic Biology </a></div>

                    <div class="sj">
                        7.2.3 Social Media Accounts
                    </div>
                    <div class="pb">
                        ●Bilibili
                        <br>
                        ●Official Account
                        <br>
                        ●Twitter
                        <br>
                        ●Instagram

                    </div>

                </div>


            </div>

            <div id="red"
                style="float: left;margin-left: 140px; height: 15800px;width: 55px;background-color: #d44225;">
            </div>
        </div>
        <div>
            <image src="https://2021.igem.org/wiki/images/8/8d/T--SZPT-CHINA--bottomPic.png" class="pic"
                style="margin-top: -372px;width: 1920px;"></image>
        </div>
    </div>
</body>
<style>
    .nameBlue {
        color: #2588d4;
        font-size: 100%;
        font-family: 'Quicksand', sans-serif;
        margin-top: 50px;
        padding: 10px;
        font-weight: 500;
        text-align: center;
        width: 150px;
        margin-left: 38px;
    }

    .nameRed {
        color: red;
        font-size: 100%;
        font-family: 'Quicksand', sans-serif;
        margin-top: 50px;
        padding: 10px;
        font-weight: 500;
        text-align: center;
        width: 150px;
        margin-left: 38px;
    }

    .picBlue {
        width: 150px;
        height: 100px;
        margin-left: 38px;
        margin-top: 10px;
    }

    .qa {
        margin-top: 50px;
    }

    .yj {
        margin-top: 50px;
    }

    .k {
        box-shadow: 0 8px 16px 0 rgb(0 0 0 / 20%);
        padding: 50px;
        margin-top: 50px;
    }
</style>

<script>
    var bodyStyle = document.createElement('style')
    var docWidth, docHeight;
    var designWidth, designHeight;

    // 屏幕缩放实现
    function refreshScale() {
        bodyStyle.innerHTML = `body{width:${designWidth}px; height:${designHeight}px!important;}`
        document.documentElement.firstElementChild.appendChild(bodyStyle)
        document.getElementById('main').style = 'display:flex'
        //document.getElementsByClassName('mobile')[0].style = 'display:none'

        var widthRatio = docWidth / designWidth,
            heightRatio = docHeight / designHeight;
        var topRatio = 26 * heightRatio;
        //heightRatio=0.782222;
        //解决因transform导致margin-top
        document.getElementById('content').style =
            `transform:scale(${widthRatio},${heightRatio});transform-origin:left top;margin-top: -${topRatio}px;`;
        // 应对浏览器全屏切换前后窗口因短暂滚动条问题出现未占满情况
        setTimeout(function () {
            var lateWidth = document.documentElement.clientWidth,
                lateHeight = document.documentElement.clientHeight;
            if (lateWidth === docWidth) return;

            widthRatio = lateWidth / designWidth
            heightRatio = lateHeight / designHeight
            document.getElementById('content').style = "transform:scale(" + widthRatio + "," + heightRatio +
                ");transform-origin:left top;margin-top: -${topRatio}px;"
        }, 0)
    }

    // 清除scale
    function clearScale() {
        // 清除pc样式
        bodyStyle.innerHTML = ``
        document.documentElement.firstElementChild.appendChild(bodyStyle)
        document.body.style = "transform:none;transform-origin:none"
    }

    // 初始化
    function init() {
        // 获取当前屏幕可视区域大小
        docWidth = document.documentElement.clientWidth;
        docHeight = document.documentElement.clientHeight;
        // 判断是否是移动设备
        if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|Windows Phone/i.test(navigator.userAgent)) {

            // mobilePage();
            let mainClass = document.getElementById('main').classList;
            designWidth = 1920;
            designHeight = 3100;


            var value = document.getElementById('blue').getAttribute("style")
            value = value.replace(/15800/, "18200")
            $("#blue").attr("style", value);

            var value = document.getElementById('red').getAttribute("style")
            value = value.replace(/15800/, "18200")
            $("#red").attr("style", value);

            //手机适配目录
            var value = document.getElementById('dir1').getAttribute("style")
            value = value.replace(/6vh/, "2vh")
            $("#dir1").attr("style", value);


            var value = document.getElementById('dir1').getAttribute("style")
            value = value.replace(/3vh/, "1vh")
            $("#dir1").attr("style", value);


            var value = document.getElementById('dir2').getAttribute("style")
            value = value.replace(/6vh/, "2vh")
            $("#dir2").attr("style", value);

            var value = document.getElementById('dir3').getAttribute("style")
            value = value.replace(/6vh/, "2vh")
            $("#dir3").attr("style", value);

            var value = document.getElementById('dir4').getAttribute("style")
            value = value.replace(/6vh/, "2vh")
            $("#dir4").attr("style", value);

            var value = document.getElementById('dir5').getAttribute("style")
            value = value.replace(/6vh/, "2vh")
            $("#dir5").attr("style", value);

            var value = document.getElementById('dir6').getAttribute("style")
            value = value.replace(/9vh/, "3vh")
            $("#dir6").attr("style", value);

            var value = document.getElementById('dir7').getAttribute("style")
            value = value.replace(/6vh/, "2vh")
            $("#dir7").attr("style", value);



            var value = document.getElementById('dir0p').getAttribute("style")
            value = value.replace(/1.8rem/, "1.3rem")
            $("#dir0p").attr("style", value);

            var value = document.getElementById('dir1p').getAttribute("style")
            value = value.replace(/1.2rem/, "0.9rem")
            $("#dir1p").attr("style", value);

            var value = document.getElementById('dir2p').getAttribute("style")
            value = value.replace(/1.2rem/, "0.9rem")
            $("#dir2p").attr("style", value);

            var value = document.getElementById('dir3p').getAttribute("style")
            value = value.replace(/1.2rem/, "0.9rem")
            $("#dir3p").attr("style", value);

            var value = document.getElementById('dir4p').getAttribute("style")
            value = value.replace(/1.2rem/, "0.9rem")
            $("#dir4p").attr("style", value);

            var value = document.getElementById('dir5p').getAttribute("style")
            value = value.replace(/1.2rem/, "0.9rem")
            $("#dir5p").attr("style", value);


            var value = document.getElementById('dir6p').getAttribute("style")
            value = value.replace(/1.2rem/, "0.9rem")
            $("#dir6p").attr("style", value);


            var value = document.getElementById('dir7p').getAttribute("style")
            value = value.replace(/1.2rem/, "0.9rem")
            $("#dir7p").attr("style", value);


            mainClass.add('pc');
            mainClass.remove('large');
            refreshScale()
        } else {
            //pc
            let mainClass = document.getElementById('main').classList;
            designWidth = 1920;
            designHeight = 980;
            mainClass.add('pc');
            mainClass.remove('large');
            refreshScale()

        }
    }

    // 大屏设置 rem 函数
    function setRem(designSize) {
        // 基准大小
        baseSize = 100;
        let basePc = baseSize / designSize; // 表示1680的设计图,使用100PX的默认值
        let vW = window.innerWidth; // 当前窗口的宽度

        let rem = vW * basePc; // 以默认比例值乘以当前窗口宽度,得到该宽度下的相应font-size值
        document.documentElement.style.fontSize = rem + "px";
    }



    // 移动端页面
    function mobilePage() {
        clearScale()
        // 是移动设备 展示移动设备页
        //document.getElementById('main').style = 'display:none'
        //document.getElementsByClassName('mobile')[0].style = 'display:flex'
        // mobile 设置 rem 函数
        let designSize = 750;
        setRem(designSize);


    }

    // 初始化
    //init();

    // 监听前进/后退以及load事件触发
    window.addEventListener("pageshow", function (e) {
        if (e.persisted) { // 浏览器后退的时候重新计算
            init()
        }
    }, false);

    // 监听屏幕缩放
    window.addEventListener("resize", function () {
        init()
    }, false);
</script>
<!-- END-适配 -->





</html>